<template>
  <div>
    <TopContent>
      <div>
        <MenuTabs
          :list="list"
          v-model:current="currentMenuIndex"
          @update:current="currentChange"
        />
        <div class="topic" v-if="currentMenuIndex === 1">
          <div class="topic-tx"></div>
          <div>更新日期：12月31日</div>
        </div>
      </div>
    </TopContent>
    <div>
      <div v-if="currentMenuIndex === 0">
        <BlockBox title="推荐歌单">
          <AlbumnList :list="albumList" />
        </BlockBox>
        <BlockBox title="最新音乐">
          <SongList :list="songList" :show-sort="false" />
        </BlockBox>
      </div>
      <div v-if="currentMenuIndex === 1">
        <SongList :list="playList" :show-sort="true" />
      </div>
      <div v-if="currentMenuIndex === 2">
        <Search />
      </div>
    </div>
  </div>
</template>
<script>
import BlockBox from "@/views/index/components/BlockBox";
import AlbumnList from "@/views/index/components/AlbumnList";
import Search from "@/views/index/components/Search";
import {
  useHandleAlbum,
  useHanleSongList,
  useHotSongs,
} from "./hooks/index.ts";
import { defineComponent } from "vue";
export default defineComponent({
  name: "index",
  data() {
    return {
      currentMenuIndex: 0,
      list: [{ label: "推荐音乐" }, { label: "热歌榜" }, { label: "搜索" }],
    };
  },
  async setup() {
    const { albumList } = await useHandleAlbum();
    const { songList } = await useHanleSongList();
    const { playList } = await useHotSongs(3778678);
    return {
      albumList, //专辑列表
      songList, //歌单列表
      playList, //热歌榜歌曲
    };
  },
  components: {
    BlockBox,
    AlbumnList,
    Search,
  },
  methods: {
    currentChange(e) {
      console.log("currentChange", e);
    },
  },
});
</script>
<style lang="scss" scoped>
.topic {
  height: 290px;
  background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_3x.jpg?2bfefd3ba37eaffbd66b7d108b9de26a=)
    no-repeat center/cover;
  padding: 60px;
  color: #fff;
  .topic-tx {
    width: 284px;
    height: 134px;
    background-image: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=);
    background-position: -48px -60px;
    background-size: 332px 194px;
    margin-bottom: 20px;
  }
}
</style>
